﻿


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>

    <script type = "text/javascript">
        function successFunction(jsondata) {
            var thegrid = jQuery("#productGridView")[0];
            thegrid.addJSONData(JSON.parse(jsondata.d));
        }

        function getProducts() {
            $.ajax({
                url: '/WCFServiceUsingjQueryAJAX/Services/Service2.svc/GetProducts',

               // url: DataLoader.svc / GetProducts,
                data: "{}",  // For empty input data use "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: successFunction
            });
        }

        function dataBindToGrid() {
            jQuery("#productGridView").jqGrid({
                datatype: getProducts,
                colNames: ['ProductID', 'Name', 'ProductNumber', 'Color', 'Size', 'Style'],
                colModel: [{ name: 'ProductID', index: 'ProductID', width: 100, align: 'left' },
                    { name: 'Name', index: 'Name', width: 100, align: 'left' },
                    { name: 'ProductNumber', index: 'ProductNumber', width: 100, align: 'left' },
                    { name: 'Color', index: 'Color', width: 100, align: 'left' },
                    { name: 'Size', index: 'Size', width: 100, align: 'left' },
                    { name: 'Style', index: 'Style', width: 100, align: 'left' }
                ],
                rowNum: 10,
                rowList: [5, 10, 20, 50, 100],
                sortname: 'ProductID',
                pager: jQuery('#pageNavigation'),
                sortorder: "desc",
                viewrecords: true
            });
        }
        jQuery(document).ready(function () {
            jQuery("input#LoadData").live("click", dataBindToGrid);
        });
    </script>
</head>
<body>
    <form name="form1" method="post" action="test.htm" id="form1">

    <table id="productGridView"></table>
    <div id = "pageNavigation"></div>

    <input id = "LoadData" type = "button" value = "LoadData" />
    </form>
</body>
</html>
